import React, { Component } from 'react'
import { Row, Col, Button, Table, Modal } from 'antd'
import { connect } from 'dva'
import { Link } from 'dva/router'
import style from './index.css'
import AddSpecialty from './addSpecialty'
const confirm = Modal.confirm;

class SpecialtyManage extends Component {
    constructor(props) {
        super(props);
        this.state={
            visible:false,
            departmentguid:'',
            schoolName:'',
            departmentName:'',
            deleteSpecialtyId:'',
            dataId:'',
            data: [],
        }
    }
    componentWillMount(){
        const id = this.props.location.pathname.split('/')[this.props.location.pathname.split('/').length - 3];
        const schoolName = this.props.location.pathname.split('/')[this.props.location.pathname.split('/').length - 2];
        const departmentName = this.props.location.pathname.split('/')[this.props.location.pathname.split('/').length - 1];
        this.setState({
            departmentguid:id,
            schoolName,
            departmentName,
        })
    }

    //点击新增专业
    addSpe =()=>{
        this.setState({
            visible:true,
        })
    }
    //点击删除
    delete =()=>{
        const { deleteSpecialtyId, departmentguid} = this.state;
        const {dispatch} = this.props;
        confirm({
            title: '确定删除？',
            content: '请谨慎操作！',
            okText: '确定',
            cancelText: '取消',
            onOk() {
                dispatch({
                    type: 'schoolManage/deleteSpecialty',
                    payload: {
                        rowguid: deleteSpecialtyId,
                        departmentguid,
                    }
                });
            },
            onCancel() {
            },
        });
    }
    //获取弹框的dom
    saveForm =(form)=>{
        this.form = form;
    }
    //点击弹框确定
    handleOk = () =>{
        const { dataId, departmentguid} = this.state;
        this.form.validateFields((err,values)=>{
            if(err){
                return 
            }
            if(dataId === ''){
                this.props.dispatch({
                    type:'schoolManage/addSpecialty',
                    payload:{
                        departmentguid,
                        specialty: values.specialty,
                    }
                })
            }else{
                this.props.dispatch({
                    type:'schoolManage/updateSpecialty',
                    payload:{
                        rowguid:dataId,
                        specialty: values.specialty,
                        departmentguid,
                    }
                })
            }
            this.setState({
                visible: false,
                dataId: ''
            })
            this.form.resetFields();
        })
    }
    //点击弹框取消
    handleCancel =()=>{
        this.setState({
            visible: false
        });
        this.form.resetFields();
    }
    //点击修改
    update =(id,data)=>{
        this.setState({
            visible:true,
            data,
            dataId:id
        })
    }
    render() {
        const { departmentguid,schoolName,departmentName,visible,data} = this.state;
        const { dataList} = this.props.schoolManage;
        const columns = [
            {
                title: '院系名称',
                key: '1',
                dataIndex: 'specialty',
            }, {
                title: '创建时间',
                key: '2',
                dataIndex: 'cdate'
            }, {
                title: '操作',
                key: '3',
                dataIndex: 'key',
                render: (text, record) =>
                    <span onClick={() => { this.update(record.rowguid, record) }} className={style.span}>修改</span>

            }
        ];
        const rowSelection = {
            type: 'radio',
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    deleteSpecialtyId: selectedRows[0].rowguid
                })
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User',
                name: record.name,
            }),
        };
        return (
            <div className={style.content}>
                <Row>
                    <Col span={15} className={style.col}>
                        <span className={style.icon}>{schoolName}/{departmentName}/专业列表</span>
                    </Col>
                    <Col span={3} className={style.col}>
                    </Col>
                    <Col span={3} className={style.col}>
                        <Button className={style.Button} type="primary" onClick={this.addSpe}>新增专业</Button>
                    </Col>
                    <Col span={3} className={style.col}>
                        <Button className={style.Button} onClick={this.delete}>删除</Button>
                    </Col>
                </Row>
                <Row>
                    <Table
                        rowKey="id"
                        rowSelection={rowSelection}
                        columns={columns}
                        dataSource={dataList} />
                </Row>
                <AddSpecialty
                    ref={this.saveForm}
                    visible={visible}
                    data={data}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                />
            </div>
        )
    }
}
export default connect(({schoolManage})=>({schoolManage}))(SpecialtyManage)
